<template lang="html">
  <div class="statistic">
    <div class="breadNav">
      <el-breadcrumb separator="/" class="">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>业务统计</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="statMenu">
      <div class="stathead">
        <el-form ref="form" :model="form" :inline="true">
          <el-form-item label="时间范围">
            <el-col :span="11">
              <el-date-picker type="date" format="yyyy-MM-dd" placeholder="选择开始日期" v-model="form.startdate" style="width: 100%;"  @change="startdateChange"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align:center">-</el-col>
            <el-col :span="11">
              <el-date-picker type="date" format="yyyy-MM-dd" placeholder="选择结束日期" v-model="form.enddate" style="width: 100%;"  @change="enddateChange"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="汇总方式">
            <el-select v-model="form.statype" placeholder="请选择汇总方式" style="width:180px" @change="selectType">
              <el-option label="诉求来源" value="诉求来源"></el-option>
              <el-option label="部署" value="部署"></el-option>
              <el-option label="服务类型" value="服务类型"></el-option>
            </el-select>
            <el-checkbox-group v-model="checkList" v-show="tpbx">
               <el-checkbox label="分部"></el-checkbox>
               <el-checkbox label="网所"></el-checkbox>
               <el-checkbox label="热站"></el-checkbox>
               <el-checkbox label="小区"></el-checkbox>
               <el-checkbox label="大楼"></el-checkbox>
             </el-checkbox-group>
             <el-checkbox-group v-model="checkList2" v-show="tpbx2">
                <el-checkbox label="服务类型"></el-checkbox>
                <el-checkbox label="服务项目"></el-checkbox>
              </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="staMain" v-loading="loading">
        <el-table
          ref="multipleTable"
          :data="alldata"
          border
          max-height="500"
          tooltip-effect="dark"
          style="width: 100%">
          <el-table-column prop="C_RecordOrigin" label="诉求来源" show-overflow-tooltip v-if="originshow">
          </el-table-column>
          <el-table-column prop="C_FirstAppealType" label="服务类型" show-overflow-tooltip v-if="typeshow">
          </el-table-column>
          <el-table-column prop="C_SecondAppealType" label="服务项目" show-overflow-tooltip v-if="type2show">
          </el-table-column>
          <el-table-column prop="C_DepartmentName" label="分部" show-overflow-tooltip v-if="fenbushow">
          </el-table-column>
          <el-table-column prop="C_WangName" label="网所" show-overflow-tooltip v-if="wangshow">
          </el-table-column>
          <el-table-column prop="C_TransferName" label="热站" show-overflow-tooltip v-if="hotshow">
          </el-table-column>
          <el-table-column prop="C_BoroughName" label="小区" show-overflow-tooltip v-if="areashow">
          </el-table-column>
          <el-table-column prop="C_BuildingName" label="大楼" show-overflow-tooltip v-if="buildshow">
          </el-table-column>
          <el-table-column prop="DCL" label="待处理" show-overflow-tooltip v-if="checknum">
          </el-table-column>
          <el-table-column prop="CLZ" label="处理中" show-overflow-tooltip v-if="checknum">
          </el-table-column>
          <el-table-column prop="YBJ" label="已办结" show-overflow-tooltip v-if="checknum">
          </el-table-column>
          <el-table-column prop="XJ" label="小计" show-overflow-tooltip v-if="checknum">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'statistic',
  data(){
    return{
      form: {
        startdate: '',
        enddate: '',
        statype:''
      },
      company:'',
      aptype:'',
      tableData:[],
      checkList: [],
      checkList2:[],
      tpbx:false,
      tpbx2:false,
      alldata:[],
      loading:false,
      dapartue:[],
      wangue:[],
      fenbushow:false,
      wangshow:false,
      hotshow:false,
      areashow:false,
      buildshow:false,
      checknum:false,
      originshow:false,
      typeshow:false,
      type2show:false
    }
  },
  methods:{
    startdateChange(val){
      this.form.startdate = val
    },
    enddateChange(val){
      this.form.enddate = val
    },
    selectType(val){
      if(val == '部署'){
        this.tpbx = true;
        this.tpbx2 = false
      }else if(val == '服务类型'){
        this.tpbx2 = true;
        this.tpbx = false;
      }else{
        this.tpbx = false
        this.tpbx2 = false
        this.aptype = '"Values":["'+val+'"]'
      }
      this.fenbushow = false;
      this.wangshow = false;
      this.hotshow = false;
      this.areashow = false;
      this.buildshow = false;
      this.checknum = false;
      this.originshow = false;
      this.typeshow = false
      this.type2show = false;
    },
    onSearch(){ //搜索

      this.checknum = true;

      if(this.form.statype == '部署'){

        this.typeshow = false;
        this.type2show = false;
        this.originshow = false;

        for(var i=0;i<this.checkList.length;i++){
          if(this.checkList[i] == '分部'){
            this.fenbushow = true
          }else if(this.checkList[i] == '网所'){
            this.wangshow = true
          }else if(this.checkList[i] == '热站'){
            this.hotshow = true
          }else if(this.checkList[i] == '小区'){
            this.areashow = true
          }else if(this.checkList[i] == '大楼'){
            this.buildshow = true
          }
        }
        this.aptype = '"Values":'+JSON.stringify(this.checkList)
      }else if(this.form.statype == '诉求来源'){
        this.originshow = true
      }else if(this.form.statype == '服务类型'){

        for(var i=0;i<this.checkList2.length;i++){
          if(this.checkList2[i] == '服务类型'){
            this.typeshow = true;
          }else if(this.checkList2[i] == '服务项目'){
            this.type2show = true;
          }
        }
        this.originshow = false;
        this.aptype = '"Values":'+JSON.stringify(this.checkList2)

      }

      let data = {
        method:'Web_AppealTotal',
        origin:'WarmAppealService',
        company:'沈阳惠天热电股份有限公司', //this.company
        begintime:this.form.startdate,
        endtime:this.form.enddate,
        groupby:this.aptype
      }

      this.loading = true
      const _this = this;
      this.post(this.jholdUrl,data,function(res){
        _this.alldata = res.Data;
        _this.loading = false

    })


    }
  },
  created(){
    let info = JSON.parse(localStorage.loginInfo);
    this.company = info.company
  }
}
</script>

<style lang="css">
.statMenu{
  padding:0 20px 20px 20px;
  overflow: hidden;
}
.stathead{
  padding: 20px 20px 0 20px;
  background: #fff;
  border: 1px solid #dfe6ec
}
.staMain{
  margin-top: 20px;
}
</style>
